<template>
  <!-- 为你推荐 -->
  <div class="recommend">
    <div class="header">为你推荐</div>
    <div class="list">
      <ul class="recommends-list">
        <li
          class="recommends-list-item"
          v-for="recommend in recommendList"
          :key="recommend.showId"
          @click="goToShowDetail(recommend.showId)"
        >
          <div class="cover">
            <img :src="recommend.imgUrl" class="thumb" />
            <div class="tag"></div>
          </div>

          <div class="city-title">
            <div class="title">
              <span class="city">{{ recommend.showCity }}</span
              >{{ recommend.showName }}
            </div>
          </div>

          <div class="time">{{ recommend.showDate }}</div>

          <div class="price">
            {{ recommend.priceInfo?.prefix }} <span>{{ recommend.priceInfo?.yuanNum }}</span>
            {{ recommend.priceInfo?.suffix }}
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { fetchTourSiteRecommend } from '@/api/index.js'
import { ref, onMounted, computed } from 'vue'
import { useStore } from '@/stores/index.js'
const store = useStore()
const cityId = computed(() => store.currentCity.cityId)

import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const showId = computed(() => route.query.showId)

const length = ref(20)
const pageNum = ref(1)
const offset = computed(() => (pageNum.value - 1) * length.value)

const recommendList = ref([])

onMounted(() => {
  getTourSiteRecommend(cityId.value, showId.value, length.value, offset.value)
})

const getTourSiteRecommend = async (cityId, showId, length, offset) => {
  try {
    const { statusCode, data } = await fetchTourSiteRecommend(cityId, showId, length, offset)

    if (statusCode === 200) {
      recommendList.value = data
    }
  } catch (error) {
    console.log('获取推荐列表失败', error)
  }
}

const goToShowDetail = (id) => {
  router.push({ path: '/show-detail', query: { showId: id } })
}
</script>

<style scoped lang="scss">
.recommend {
  padding: 0 15px;
  margin-top: 60px;

  .header {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 10px;
  }

  .list {
    .recommends-list {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 20px;
      align-items: start;
      justify-items: start;
      justify-content: start;
      align-content: center;

      .recommends-list-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        overflow: hidden;

        .cover {
          height: 250px;
          width: 100%;
          position: relative;
          margin-bottom: 10px;

          .thumb {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
          }

          .tag {
          }
        }

        .city-title {
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
          font-weight: 500;

          .title {
            font-size: 16px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            word-break: break-all;

            .city {
              font-size: 12px;
              border: 1px solid #ccc;
              margin-right: 5px;
              padding: 2px;
            }
          }
        }

        .time {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 14px;
          font-weight: 500;
          color: #323038;
          margin: 10px 0;
        }

        .price {
          color: #ff1d41;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 10px;
          font-weight: 400;

          span {
            font-size: 20px;
            font-weight: 700;
          }
        }
      }
    }
  }
}
</style>
